import React from 'react';
import { Row, Col, Image, Tag } from 'antd';
import {
  Radar,
  RadarChart,
  PolarGrid,
  PolarAngleAxis,
  PolarRadiusAxis,
} from 'recharts';

const Test = () => {
  const lucarioInfo = {
    属性: ['钢', '格斗'],
    特性: '不屈之心',
    mega进化: '超级路卡利欧',
    超极巨化: '无',
    技能: ['波导弹', '骨头回力标', '发劲', '子弹拳'],
  };

  const tagColors = {
    属性: 'geekblue',
    特性: 'volcano',
    mega进化: 'gold',
    超极巨化: 'red',
    技能: 'lime',
  };

  const lucarioStats = [
    { subject: 'HP', value: 70, fullMark: 150 },
    { subject: '攻击', value: 110, fullMark: 200 },
    { subject: '防御', value: 70, fullMark: 200 },
    { subject: '特攻', value: 115, fullMark: 200 },
    { subject: '特防', value: 70, fullMark: 200 },
    { subject: '速度', value: 90, fullMark: 200 },
  ];

  return (
    <Row style={{ alignItems: 'center' }}>
      <Col span={12}>
        <Image
          src='https://assets.pokemon.com/assets/cms2/img/pokedex/full/448.png'
          alt='路卡利欧'
          style={{ maxWidth: '100%' }}
        />
      </Col>
      <Col span={12}>
        <div style={{ marginBottom: 16 }}>
          {Object.entries(lucarioInfo).map(([key, value]) => (
            <div
              key={key}
              style={{ marginBottom: 8 }}>
              <Tag color={tagColors[key]}>{key}</Tag>
              {Array.isArray(value) ? (
                value.map(item => (
                  <Tag
                    key={item}
                    color={tagColors[key]}>
                    {item}
                  </Tag>
                ))
              ) : (
                <Tag color={tagColors[key]}>{value}</Tag>
              )}
            </div>
          ))}
        </div>
        <RadarChart
          cx={250}
          cy={200}
          outerRadius={120}
          width={500}
          height={400}
          data={lucarioStats}>
          <PolarGrid />
          <PolarAngleAxis dataKey='subject' />
          <PolarRadiusAxis
            angle={30}
            domain={[0, 200]}
          />
          <Radar
            name='路卡利欧'
            dataKey='value'
            stroke='#8884d8'
            fill='#8884d8'
            fillOpacity={0.6}
          />
        </RadarChart>
      </Col>
    </Row>
  );
};

export default Test;
